<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城</title>
    <link rel="icon" href="../images/小米.png">
    <link rel="stylesheet" href="../css/xiaomiguanwang.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/index.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div class="top">
        <div class="top-container">
            <div class="top-left">
                <ul>
                    <li>小米网</li>
                    <li class="split">|</li>
                    <li>MIUI</li>
                    <li class="split">|</li>
                    <li>米聊</li>
                    <li class="split">|</li>
                    <li>游戏</li>
                    <li class="split">|</li>
                    <li>多看阅读</li>                
                    <li class="split">|</li>                
                    <li>云服务</li>                
                    <li class="split">|</li>
                    <li>小米网移动版</li>
                    <li class="split">|</li>
                    <li>Select region</li>
                    <li class="split">|</li>
                    <li>米粉节答疑</li>
                </ul>
            </div>
            <div class="top-right">
                <ul>
                    <li>注册</li>
                    <li class="split">|</li>
                    <li>登录</li>
                </ul>
            </div>
        </div>
        
    </div>

    <div class="search">
        <img src="../images/小米logo.png" alt="" class="search-img">
        <div class="search-right">
            <img src="../images/clock.png" alt="" class="clock">
            <span class="search-span">4月14日开放购买</span>
            <input type="text" placeholder="搜索您需要的商品" class="search-input">
            <div class="input-div">
                <ul>
                    <li ><a href="#">小米手环</a></li>
                    <li class="input-li"><a href="#">耳机音箱</a></li>
                    <li><a href="#">保护壳</a></li>
                </ul>
            </div>
            <button class="search-glass"></button>
            <button class="search-button">
                <img src="../images/shopcar.png" alt="" class="button-img">
                <span class="button-span">购物车</span>
            </button>
        </div>
    </div>

    <div class="show-top">
        <div class="show-subtotal">
            <div class="subtotal-top">
                <span>全部商品分类</span>
            </div>
            <div class="subtotal-row">
                <ul>
                    <p>购买手机</p>
                    <li><a href="#">小米Note</a></li>
                    <li><a href="#">小米4</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">红米Note</a></li>
                </ul>
            </div>
            <div class="subtotal-row">
                <ul>
                    <p>购买电视与平板</p>
                    <li><a href="#">小米电视</a></li>
                    <li><a href="#">小米盒子</a></li>
                    <li><a href="#">小米平板</a></li>
                </ul>
            </div>
            <div class="subtotal-row">
                <ul>
                    <p>路由器与智能硬件</p>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">体重秤</a></li>
                    <li><a href="#">净化器与滤芯</a></li>
                </ul>
            </div>
            <div class="subtotal-row">
                <ul>
                    <p>插线板、移动电源与与电池</p>
                    <li><a href="#">小米移动电源</a></li>
                    <li><a href="#">电池</a></li>
                    <li><a href="#">充电器</a></li>
                </ul>
            </div>
            <div class="subtotal-row">
                <ul>
                    <p>耳机音响与存储卡</p>
                    <li><a href="#">小米头戴式耳机</a></li>
                    <li><a href="#">小米活塞耳机</a></li>
                </ul>
            </div>
            <div class="subtotal-row">
                <ul>
                    <p>保护套与贴膜</p>
                    <li><a href="#">保护套/保护壳</a></li>
                    <li><a href="#">贴膜</a></li>
                    <li><a href="#">防尘塞</a></li>
                </ul>
            </div>
            <div class="subtotal-row">
                <ul>
                    <p>后盖与个性化配件</p>
                    <li><a href="#">米键</a></li>
                    <li><a href="#">后盖</a></li>
                    <li><a href="#">贴纸</a></li>
                    <li><a href="#">手机支架</a></li>
                </ul>
            </div>
            <div class="subtotal-row">
                <ul>
                    <p>小米生活方式</p>
                    <li><a href="#">服装</a></li>
                    <li><a href="#">米兔</a></li>
                    <li><a href="#">背包</a></li>
                    <li><a href="#">生活周边</a></li>
                </ul>
            </div>
        </div>

        <div class="show-main">
            <div class="main-top">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">小米平板</a></li>
                    <li><a href="#">小米电视</a></li>
                    <li><a href="#">盒子</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">合约机</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="main-banner">
                <div class="main-images">
                    <img src="../images/banner1.png" alt="" class="banner1"> 
                    <img src="../images/banner2.png" alt="" class="banner2" style="display:none"> 
                    <img src="../images/banner3.png" alt="" class="banner3" style="display:none"> 
                    <img src="../images/banner4.png" alt="" class="banner4" style="display:none"> 
                    <img src="../images/banner5.png" alt="" class="banner5" style="display:none"> 
                </div>
                <button class="prev"></button>
                <button class="next"></button>
                <ul>
                    <li class="current">1</li>
                    <li >2</li>
                    <li >3</li>
                    <li >4</li>
                    <li >5</li>
                </ul>
            </div>
            <div class="main-bottom">
                <div class="bottom-left">

                </div>
                <div class="bottom-middle">

                </div>
                <div class="bottom-right">

                </div>
            </div>
        </div>
    </div>

    <div class="product-title">
        <span class="title-left">小米明星单品</span>
        <span class="title-right">&nbsp;&nbsp;根据机型选配件</span>
        <button class="left-arrows"></button>
        <button class="right-arrows"></button>
    </div>
    <div class="product-container">
        <div class="product-first">
            <img src="../images/socket-chazuo.jpg" alt="" style="cursor: pointer">
            <p class="p-top">小米智能插座</p>
            <p class="p-bottom">让普通家电变得智能</p>
        </div>
        <div class="product-second">
            <img src="../images/purifier-jinghuaqi.jpg" alt="" style="cursor: pointer">
            <p class="p-top">小米空气净化器</p>
            <p class="p-bottom">高性能智能空气净化器立即预约</p>
        </div>
        <div class="product-third">
            <img src="../images/piston headphones-erji.jpg" alt="" style="cursor: pointer">
            <p class="p-top">小米活塞耳机简装版</p>
            <p class="p-bottom">好声音源自活塞式音腔，延续经典设计</p>
        </div>
        <div class="product-fourth">
            <img src="../images/Router-luyouqi.jpg" alt="" style="cursor: pointer">
            <p class="p-top">小米路由器</p>
            <p class="p-bottom">顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
        </div>
    </div>

    <div class="new-product-title">
        <span class="title-left">新品上架</span>
        <span class="title-right">更多></span>
    </div>
    <div class="new-product-container">
        <div class="left-container">
            <div class="left-top">
                <div class="left-top-left">

                </div>
                <div class="left-top-right">
                    <p>小米手环</p>
                    <p>79元</p>
                    <img src="../images/小米手环.jpg" alt="">
                </div>
            </div>
            <div class="left-middle">
                <div class="left-middle-left">
                    <div>
                        <p>5周年米兔钥匙扣</p>
                        <p>9.9元</p>
                        <img src="../images/yaoshi.png" alt="">
                    </div>
                    <div>
                        <p>QCY派Q8蓝牙耳机</p>
                        <p>59.9元</p>
                        <img src="../images/lanyaerji.png" alt="">
                    </div>
                </div>
                <div class="left-middle-middle">
                    <p>小米T恤路标MILOGO</p>
                    <p>39元</p>
                    <img src="../images/xiaomiTxu.jpg" alt="">
                </div>
                <div class="left-middle-right">
                    <p>小米4实木后盖</p>
                    <p>69元</p>
                    <img src="../images/shimuhougai.jpg" alt="">
                </div>
            </div>
            <div class="left-bottom">
                <div class="left-bottom-left">
                    <p>小米Note超薄保护壳</p>
                    <p>49元</p>
                    <img src="../images/baohuke.png" alt="">
                </div>
                <div class="left-bottom-middle">
                    <p>小米自拍杆</p>
                    <p>49元</p>
                    <img src="../images/zipaigan.jpg" alt="">
                </div>
                <div class="left-bottom-right">
                    <p>先锋CL31系列耳式耳机</p>
                    <p>99元</p>
                    <img src="../images/ershierji.jpg" alt="">
                </div>
            </div>
        </div>

        <div class="right-sidebar">
            <div class="siderbar-top">
                <p class="title"><a href="#">特价商品</a></p>
                <p class="p-top">SanDisk32G存储卡</p>
                <span class="span-red">79元</span>
                <span class="span-line">109元</span>
                <p class="p-bottom">还有更多特价商品</p>
                <img src="../images/cunchuka.jpg" alt="">
            </div>
            <div class="siderbar-middle">
                <p class="p-top">特惠配件套餐</p>
                <p class="p-bottom">手机必备配件组合购买</p>
                <p class="p-bottom">实惠更实惠</p>
                <img src="../images/peijiantaocan.jpg" alt="">
            </div>
            <div class="siderbar-bottom">
                <p class="p-top">我爱酷玩</p>
                <p class="p-bottom">邂逅炫酷的电子产品</p>
                <p class="p-bottom">结交趣味相投的朋友</p>
                <img src="../images/woaikuwan.jpg" alt="">
            </div>
            <div class="siderbar-last">
                <div class="siderbar-list">
                    <a href="#"><p class="p-left">企业用户采购通道</p><p class="p-right">></p></a>
                </div>
                <div class="siderbar-list">
                    <a href="#"><p class="p-left">小米手机防伪查询</p><p class="p-right">></p></a>
                </div>
                <div class="siderbar-list">
                    <a href="#"><p class="p-left">小米手机官方版</p><p class="p-right">></p></a>
                </div>
                <div class="siderbar-list">
                    <a href="#"><p class="p-left">小米路由器官方版</p><p class="p-right">></p></a>
                </div>
                <div class="siderbar-list">
                    <a href="#"><p class="p-left">米粉红包</p><p class="p-right">></p></a>
                </div>
                <div class="chongzhi">
                    <h>话费充值</h>
                    <input type="text" placeholder="请输入手机号" class="border">
                    <form >
                        <div class="form-group">
                            <select class="border" >
                                <option value="100元">100元</option>
                                <option value="50元">50元</option>
                                <option value="20元">20元</option>
                            </select>
                        </div>
                    </form>
                    <p>实付价格98.4元起</p>
                    <button class="border tc-white">立即充值</button>
                </div>
            </div>
        </div>

    </div>

    <div class="bottom">
        <div class="bottom-container">
            <div class="bottom-service">
                <div class="service">
                    <img src="../images/qianzi.png" alt=""><br>
                    <p>1小时快修服务</p>
                </div>
                <div class="service">
                    <img src="../images/shizhong.png" alt=""><br>
                    <p>7天无理由退换</p>
                </div>
                <div class="service">
                    <img src="../images/xunhuan.png" alt=""><br>
                    <p>15天免费换货</p>
                </div>
                <div class="service">
                    <img src="../images/baoyou.png" alt=""><br>
                    <p>满150元包邮</p>
                </div>
                <div class="service">
                    <img src="../images/wangdian.png" alt=""><br>
                    <p>520余家售后网点</p>
                </div>
            </div>
            <div class="bottom-links">            
                <dl class="service-list">
                    <dt>帮助中心</dt>                
                    <dd><a href="#">购物指南</a></dd>                
                    <dd><a href="#">支付方式</a></dd>                
                    <dd><a href="#">配送方式</a></dd>                
                </dl>
                <dl class="service-list-else">
                    <dt>服务支持</dt>                
                    <dd><a href="#">售后政策</a></dd>                
                    <dd><a href="#">自助服务</a></dd>                
                    <dd><a href="#">相关下载</a></dd>                
                </dl>
                <dl class="service-list-else">
                    <dt>小米之家</dt>                
                    <dd><a href="#">小米之家</a></dd>                
                    <dd><a href="#">服务网店</a></dd>                
                    <dd><a href="#">预约亲临到店服务</a></dd>                
                </dl>
                <dl class="service-list-else">
                    <dt>关于小米</dt>                
                    <dd><a href="#">了解小米</a></dd>                
                    <dd><a href="#">加入小米</a></dd>                
                    <dd><a href="#">联系我们</a></dd>                
                </dl> 
                <dl class="service-list-else">
                    <dt>关注我们</dt>                
                    <dd><a href="#">新浪微博</a></dd>                
                    <dd><a href="#">小米部落</a></dd>                
                    <dd><a href="#">官方微信</a></dd>                
                </dl>    
                <div class="service-right">
                    <p class="phone">400-100-5678</p>
                    <p class="word">周一至周日 8:00-18:00<br>（仅收市话费）</p>
                    <button class="service-btn">24小时在线客服</button>
                </div>
            </div>
            <hr>
            <div class="row-center">
                <ul>
                    <li>小米旗下网站：</li>
                    <li><a href="#">小米网</a></li>
                    <li class="split">|</li>
                    <li><a href="#">MIUI</a></li>
                    <li class="split">|</li>
                    <li><a href="#">米聊</a></li>
                    <li class="split">|</li>
                    <li><a href="#">多看书城</a></li>
                    <li class="split">|</li>
                    <li><a href="#">小米路由器</a></li>
                    <li class="split">|</li>
                    <li><a href="#">繁体香港</a></li>
                    <li class="split">|</li>
                    <li><a href="#">繁体台湾</a></li>
                    <li class="split">|</li>
                    <li><a href="#">English</a></li>
                    <li class="split">|</li>
                    <li><a href="#">小米后院</a></li>
                    <li class="split">|</li>
                    <li><a href="#">小米大猫店</a></li>
                    <li class="split">|</li>
                    <li><a href="#">小米淘宝自营店</a></li>
                    <li class="split">|</li>
                    <li><a href="#">小米网盟</a></li>
                </ul>
                <p>@mi.com&nbsp;京ICP证110507号&nbsp;京ICP备10046444号&nbsp;京公安网备1101080212535号&nbsp;京网文[2014]0059-0009号</p>
                <img src="../images/bottom-gongan.png" >                        
                <select class="form-control">
                    <option value="">简体中文</option>
                    <option value="">English</option>
                    <option value="">繁体香港</option>
                </select> 
            </div>
        </div>
    </div>
</body>
</html>